<template>
  <div class="customer-service">
    <div class="chat-box">
      <div v-for="message in messages" :key="message.id" class="message">
        <!-- 动态绑定消息内容的类名 -->
        <div :class="['message-content', { 'is-me': message.type == 1, 'is-admin': message.type === 0 }]">
          <span>{{ message.content }}</span>
        </div>
      </div>
    </div>
    <div class="input-box">
      <input v-model="inputMessage" placeholder="请输入消息" @keyup.enter="sendMessage" />
      <button @click="sendMessage">
        <i class="fas fa-paper-plane"></i>
      </button>
    </div>
  </div>
</template>

<script>
import WebSocketService from "../utils/WebSocket/Websocket.js";

export default {
  data() {
    return {
      userId: "user", // 假设的用户ID
      conversationId: null, // 会话ID
      inputMessage: "",
      messages: [],
      webSocket: null,
    };
  },
  mounted() {
    this.initWebSocket();
    this.loadConversation();
  },
  methods: {
    initWebSocket() {
      this.webSocket = new WebSocketService("ws://localhost:8080/ws/", this.userId);
      this.webSocket.handleMessage = this.handleMessage;
    },
    loadConversation() {
      // 模拟从后端加载会话
      this.conversationId = 1; // 假设会话ID
      // 加载消息
      this.loadMessages();
    },
    loadMessages() {
      // 从后端加载消息逻辑
    },
    sendMessage() {
      if (this.inputMessage.trim() === "") return;
      // const message = {
      //   conversationId: this.conversationId,
      //   senderId: this.userId,
      //   receiverId: "admin", // 假设的管理员ID
      //   content: this.inputMessage,
      // };
      const message = {
        type: 1,
        content: this.inputMessage,
      };
      this.messages.push(message);
      this.webSocket.sendMessage(message);
      this.inputMessage = "";
    },
    handleMessage(data) {
      console.log(data)
      this.messages.push(data);
    },
  },
  beforeDestroy() {
    if (this.webSocket) {
      this.webSocket.close();
    }
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");

.customer-service {
  display: flex;
  flex-direction: column;
  width: 400px; /* 固定宽度 */
  height: 600px; /* 固定高度 */
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  flex: 1;
  overflow-y: auto; /* 垂直滚动 */
  padding: 20px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.message {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-end; /* 默认对齐到右侧 */
}

.message-content {
  padding: 10px 15px;
  border-radius: 15px;
  max-width: 70%;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.message-content.is-me {
  background: linear-gradient(135deg, #6dd5ed, #2193b0); /* 自己的消息颜色 */
  color: white;
  margin-left: auto; /* 自己的消息靠右 */
  transform: scale(1.02);
}

.message-content.is-admin {
  background: linear-gradient(135deg, #f9d423, #ff4e50); /* 管理员的消息颜色 */
  color: white;
  margin-right: auto; /* 管理员的消息靠左 */
}

.message-content:not(.is-me):not(.is-admin) {
  background: #f9f9f9; /* 其他用户的消息颜色 */
  color: #333;
  margin-right: auto; /* 其他用户的消息靠左 */
}

.input-box {
  display: flex;
  padding: 15px;
  background: #ffffff;
}

.input-box input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 25px;
  margin-right: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

.input-box input:focus {
  border-color: #6dd5ed;
}

.input-box button {
  padding: 12px;
  border: none;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  color: white;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  outline: none;
  transition: background-color 0.3s ease;
}

.input-box button:hover {
  background: linear-gradient(135deg, #2193b0, #6dd5ed);
}
</style>
